<!--
 @description 视频播放
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/01 11:12:32
-->
<template>
  <div :id="id" class="player" />
</template>
<script>
import Player from 'xgplayer'
// import { volume, playbackRate } from 'xgplayer/dist/controls'
export default {
  name: 'Player',
  props: {
    srcset: {
      type: [Array, String],
      default: '',
      required: true
    },
    poster: {
      type: String,
      default: ''
    },
    landscape: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      player: null,
      id: 'playerId'
    }
  },
  computed: {
  },
  created() {
    this.id = (Math.random() * 0xffff).toString(16)
  },
  mounted() {
    this.initPlayer()
  },
  beforeDestroy() {
    this.player && typeof this.player.destroy === 'function' && this.player.destroy()
  },
  methods: {
    // 实例
    initPlayer() {
      this.player = new Player({
        id: this.id,
        url: this.srcset,
        videoInit: true,
        // controlPlugins: [
        //   volume,
        //   playbackRate
        // ],
        playbackRate: [0.5, 0.75, 1, 1.5, 2], // 传入倍速可选数组
        poster: this.poster,
        height: '100%',
        width: '100%',
        playsinline: true,
        'x5-video-player-type': 'h5-page'
      })
      this.player.once('ready', () => {
        this.$emit('ready')
      })
      // 处理video层级过高
      this.player.once('complete', () => {
        // const el = this.$el.querySelector('video')
        // el.setAttribute('webkit-playsinline', true)
        // el.setAttribute('x5-video-player-type', 'h5-page')
        // el.setAttribute('x5-video-orientation', 'portraint')
        // if (this.landscape) {
        //   el.style.width = '100vh !important'
        //   el.style.height = '100vw !important'
        // }
      })
      this.player.on('pause', () => {
        this.$emit('click')
      })
      this.player.on('ended', () => {
        this.$emit('click')
      })
      this.player.on('error', () => {
        this.$emit('click')
      })
      this.player.on('requestFullscreen', () => {
        this.$emit('requestFullscreen')
      })
      this.player.on('exitFullscreen', () => {
        this.$emit('exitFullscreen')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.player{
  width: 100%;
  height: 100%;
  .video {
    width: 100%;
    height: 100%;
  }
}
</style>
